<template>
  <!-- 标签云组件 -->
  <div class="tags-box">
    <div class="tags-title">
      <span class="iconfont">&#xe87c;</span>
      标签云
    </div>
    <ul class="tags-content">
      <li>
        <div class="txt">泛型zdaaaaaaaaaaa</div>
      </li>
      <li>
        <div class="txt">泛型zjjjdaaaaajjjjjaaaaaa</div>
      </li>
      <li>
        <div class="txt">泛型zdaaaaaaaaaaa</div>
      </li>
      <li>
        <div class="txt">泛型zdaaaaaaaaaaa</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { tagAll } from '../../api/tags.js';
  export default {
    name: 'Tags',
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="less" scoped>
  .tags-box {
    width: 100%;
    // height: 200px;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 16px;
    .tags-title {
      height: 45px;
      font-size: 16px;
      font-weight: 600;
      color: salmon;
      line-height: 45px;
      padding-left: 15px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }
    .tags-content {
      display: flex;
      padding: 15px;
      flex-wrap: wrap;
      li {
        width: 30%;
        margin: 4px;
        color: #9999a6;
        padding: 5px;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        background-color: #fdfdfd;
        border: 1px solid #dcdcdc;
        border-radius: 4px;
        .txt {
          /* 多行溢出文字省略号显示必须满足五个条件： */
          /* 1 超出的部分文本进行隐藏 */
          overflow: hidden;
          /* 2 文字用省略号代替超出的部分 */
          text-overflow: ellipsis;
          /*  3 设置弹性伸缩盒子模型显示 */
          display: -webkit-box;
          /*  4 限定在一个块元素显示的文本的行数（取决于哪行超出用省略号显示） 4就表示第三行超出省略*/
          -webkit-line-clamp: 1;
          /* 5 设置或检查伸缩盒子对象的子元素的排序方式 */
          -webkit-box-orient: vertical;
        }
        &:hover {
          background-color: salmon;
          color: #fff;
        }
      }
    }
  }
</style>
